<template>
    <view id="after">
        <view class="after">
            <view class="after-content" v-for="(item, index) in after" :key="index" @click="click(item.url)">
                <view class="bag">
                    <view class="after1">
                        <view class="after1-top">
                            <image :src="item.img"></image>
                            <view>{{ item.title }}</view>
                        </view>
                        <view class="after1-top1">
                            <image :src="item.img1"></image>
                            <view>{{ item.text }}</view>
                        </view>
                    </view>
                    <view class="after2">
                        <image :src="item.img2"></image>
                        <view class="after2-content">
                            <view>{{ item.name }}</view>
                            <view>{{ item.text2 }}</view>
                            <view>￥{{ item.price }}<view style="color: #999999;">×1</view>
                            </view>
                        </view>
                    </view>
                    <view class="after3">
                        <view>{{ item.tetx3 }}</view>
                        <view>{{ item.text4 }}</view>
                    </view>
                </view>
            </view>
            <view class="but">
                <button>填写物流单号</button>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            after: [
                {
                    img: '/static/店铺.png',
                    title: '正茂通商户',
                    img1: '/static/退款.png',
                    text: '退款',
                    img2: '/static/image8.png',
                    name: '男运动鞋秋季青少年正品透...',
                    text2: '标准白、42',
                    price: '890.00',
                    tetx3: '商家审核中',
                    text4: '退款金额：￥890.00',
                    url:'/pages/refundorder/refundorder'
                },
                {
                    img: '/static/店铺.png',
                    title: '正茂通商户',
                    img1: '/static/退款.png',
                    text: '退款',
                    img2: '/static/image8.png',
                    name: '男运动鞋秋季青少年正品透...',
                    text2: '标准白、42',
                    price: '890.00',
                    tetx3: '商家审核中',
                    text4: '退款金额：￥890.00',
                    url:'/pages/refundorder/refundorder'
                },
                {
                    img: '/static/店铺.png',
                    title: '正茂通商户',
                    img1: '/static/退款.png',
                    text: '退货',
                    img2: '/static/image8.png',
                    name: '男运动鞋秋季青少年正品透...',
                    text2: '标准白、42',
                    price: '890.00',
                    tetx3: '商家审核中',
                    text4: '退款金额：￥890.00',
                    url:'/pages/refundorder/xiangq'
                },
                {
                    img: '/static/店铺.png',
                    title: '正茂通商户',
                    img1: '/static/退款.png',
                    text: '退货',
                    img2: '/static/image8.png',
                    name: '男运动鞋秋季青少年正品透...',
                    text2: '标准白、42',
                    price: '890.00',
                    tetx3: '商家审核中',
                    text4: '退款金额：￥890.00',
                    url:'/pages/refundorder/xiangq'
                }
            ]
        }
    },
    methods:{
        click(url){
            uni.navigateTo({
                url:url
            })
        }
    }
}
</script>
<style lang="scss">
page {
    background-color: #F5F5F5;
}

#after {
    width: 90%;
    margin: auto;

    .after {
        .after-content {
            margin-bottom: 30rpx;
            background-color: #fff;
            border-radius: 30rpx;

            .bag {
                width: 94%;
                margin: auto;
                padding-bottom: 16rpx;

                .after1 {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 20rpx;


                    .after1-top {
                        width: 40%;
                        display: flex;

                        image {
                            width: 20%;
                            height: 40rpx;
                        }
                    }

                    .after1-top1 {
                        width: 18%;
                        display: flex;

                        image {
                            width: 44%;
                            height: 40rpx;
                        }

                        view {
                            font-size: 14px;
                            color: #A6A6A6;
                        }
                    }
                }

                .after2 {
                    display: flex;
                    justify-content: space-between;

                    image {
                        width: 40%;
                        height: 200rpx;
                    }

                    .after2-content {
                        width: 59%;
                    }

                    .after2-content view:nth-child(1) {
                        font-size: 14px;
                        padding: 10rpx 0px;
                    }

                    .after2-content view:nth-child(2) {
                        font-size: 14px;
                        padding: 14rpx 0px;
                        color: #999999;
                    }

                    .after2-content view:nth-child(3) {
                        display: flex;
                        font-size: 18px;
                        padding: 10rpx 0px;
                    }
                }

                .after3 {
                    background-color: #F5F5F5;
                    width: 100%;
                    height: 70rpx;
                    line-height: 70rpx;
                    border-radius: 10rpx;
                    display: flex;
                }

                .after3 view:nth-child(1) {
                    width: 28%;
                    text-align: center;
                    font-weight: bold;
                    font-size: 14px;
                }

                .after3 view:nth-child(2) {
                    font-size: 14px;
                    color: #676767;
                }
            }

        }

        .but {
            background-color: #fff;
            margin-top: -48rpx;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            padding: 30rpx;
           button {
            width: 40%;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 16px;
            color: #FD6F57;
            border:1px solid #FD6F57;
            border-radius: 50rpx;
            background-color: #fff;
            margin-left: 378rpx;
           }
        }
    }
}
</style>